import React, {Component} from 'react';

class Field extends Component{
    render() {
        return (
            <div style={{background:'yellow'}}>
                <label>{this.props.label}</label>
                <input type={this.props.type} onChange={(event)=>{
                    // console.log(event.target.value)
                    this.props.onchangeEvent(event.target.value)
                }} value={this.props.valueText}/>
            </div>
        );
    }
}

class App extends Component {
    state={
        text:localStorage.getItem('text'),
        password:'',
        number:'',
    }
    render() {
        return (
            <div>
                <h1>登录页面</h1>
                <Field label="用户名：" type="text" onchangeEvent={(value)=>{
                    this.setState({
                        text:value
                    })
                }} valueText={this.state.text}></Field>

                <Field label="密码：" type="password" onchangeEvent={(value)=>{
                    this.setState({
                        password:value
                    })
                }}></Field>

                <Field label="身份证：" type="number" onchangeEvent={(value)=>{
                    this.setState({
                        number:value
                    })
                }}></Field>

                <button onClick={()=>{
                    console.log(this.state)
                }}>登录</button>
                <button>取消</button>
            </div>
        );
    }
}

export default App;
